<template>
	<ContextMenuItem
		v-if="!hasChildren"
		v-bind="$props"
		@itemClick="handleItemClick"
	></ContextMenuItem>
	<a-dropdown
		v-else
		v-model="show"
		overlayClassName="app-contextMenu__transfer"
		placement="bottomRight"
		:trigger="['click']"
	>
		<AppButton>
			{{ item.caption }}
		</AppButton>
		<template #overlay>
			<a-menu>
				<template v-for="children in item.items" :key="children.codeName">
					<a-menu-item>
						<ContextMenuItem
							:item="children"
							:loading="loading"
							@itemClick="handleItemClick"
						/>
					</a-menu-item>
				</template>
			</a-menu>
		</template>
	</a-dropdown>
</template>

<script setup lang="ts">
import { contextMenuItemProps } from '../context-menu';
import ContextMenuItem from './context-menu-item.vue';
import { IParam } from '@/core';
const props = defineProps(contextMenuItemProps);
const emit = defineEmits(['itemClick']);
const hasChildren = computed(() => {
	const { item } = props;
	if (item.itemType === 'ITEMS' && item.items && item.items.length > 0) {
		return true;
	}
	return false;
});

const show = ref(false);

const handleItemClick = (item: IParam, event: MouseEvent) => {
	emit('itemClick', item, event);
};
</script>
